<template>
  <keep-alive>
  <view class="content">
    <view class="list">
      <view class="list-call">
		<text class="sl-tile">企业名称</text>
        <input class="sl-input" v-model="name" type="text" placeholder="输入企业名称" />
      </view>
      <view class="list-call">
		<text class="sl-tile">手机号码</text>
        <input class="sl-input" v-model="phone" type="number" placeholder="请输入手机号码"/>
      </view>
      <view class="list-call">
		<text class="sl-tile">验证码</text>
        <input class="sl-input" v-model="code" type="number" maxlength="4" placeholder="请输入验证码" />
        <view class="yzm" @tap="getcode">{{yanzhengma}}</view>
      </view>
    </view>
    <view @tap="bindLogin">
      <button class="button-login">下一步</button>
    </view>
  </view>
  </keep-alive>
</template>

<script>
  var _this, js;
  export default {
    onLoad() {
      _this = this;
    },
    data() {
      return {
        name: '',
        phone: '',
        code: '',
        second: 0
      };
    },
    computed: {
      yanzhengma() {
        if (this.second == 0) {
          return '获取验证码';
        } else {
          if (this.second < 10) {
            return '重新获取0' + this.second;
          } else {
            return '重新获取' + this.second;
          }
        }
      }
    },
    onUnload() {
      this.clear()
    },
    methods: {
      clear(){
        clearInterval(js)
        js = null
        this.second = 0
      },
      getcode() {
        if (this.phone.length != 11) {
          uni.showToast({
            icon: 'none',
            title: '手机号不正确'
          });
          return;
        }
        if (this.second > 0) {
          return;
        }
        this.second = 60;
        //请求业务
        js = setInterval(function() {
          _this.second--;
          if (_this.second == 0) {
            _this.clear()
          }
        }, 1000)
      },
      bindLogin() {
        if (this.phone.length != 11) {
          uni.showToast({
            icon: 'none',
            title: '手机号不正确!'
          });
          return;
        }
        if (this.name.length == 0) {
          uni.showToast({
            icon: 'none',
            title: '企业名称不能位空!'
          });
          return;
        }
        if (this.code.length != 4) {
          uni.showToast({
            icon: 'none',
            title: '验证码不正确'
          });
          return;
        }
		uni.navigateTo({
		  url: 'enterpriseInformation' // 跳转到对应路径的页面
		});
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
  }
  .list {
    display: flex;
    flex-direction: column;
    padding-top: 50rpx;
    padding-left: 25rpx;
    padding-right: 25rpx;
	background: #FFFFFF;
	height: 330rpx;
  }

  .list-call {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    color: #333333;
    border-bottom: 0.1rpx solid #e2e2e2;
  }
  .sl-tile {
	  width: 200rpx;
	  font-size: 32rpx;
	  color: #333333;
	  font-weight: 400;
  }
  .list-call .sl-input {
    flex: 1;
    text-align: left;
	font-size: 32rpx;
	color: #999999;
	font-weight: 400;
    margin-left: 16rpx;
  }

  .yzm {
    line-height: 56rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
    width: 160rpx;
    height: 56rpx;
	background: #315EFB;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #FFFFFF;
	text-align: center;
	font-weight: 400;
  }
  .button-login {
    color: #FFFFFF;
    font-size: 34rpx;
    width: 670rpx;
    height: 98rpx;
    line-height: 98rpx;
	background: #315EFB;
	border-radius: 49rpx;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 850rpx;
  }
</style>
